import React from 'react';
import {Routes, Route, Navigate, NavLink} from 'react-router-dom'
import './App.css'
import MyNavLink from "./components/MyNavLink";
import Index from "./pages/Index";
import News from "./pages/News";
import GoodsList from "./pages/GoodsList";
import My from "./pages/My";
import NotFound from "./pages/NotFound";
import Cart from "./pages/Cart";
import Collect from "./pages/Collect";

function App(props) {
    return (
        <div id={'container'}>
          <MyNavLink/>
            <Routes>
                <Route path={'/'} element={<Index/>}/>
                <Route path={'/news'} element={<News/>}/>
                <Route path={'/goodsList'} element={<GoodsList/>}/>
                <Route path={'/my'} element={<My/>}>

                    {/*完整路径*/}
                    {/*<Route path={'/my'} element={<Navigate to={'/my/cart'}/>}/>*/}
                    {/*<Route path={'/my/cart'} element={<Cart/>}/>*/}
                    {/*<Route path={'/my/collect'} element={<Collect/>}/>*/}

                    {/*相对路径*/}
                    {/*<Route path={'/my'} element={<Navigate to={'cart'}/>}/>*/}
                    {/*<Route index element={<Navigate to={'cart'}/>}/>*/}
                    {/*<Route path={'cart'} element={<Cart/>}/>*/}

                    {/*关于默认路由的配置：情况一*/}
                    {/*<Route index element={<Cart/>}/>*/}
                    {/*<Route path={'collect'} element={<Collect/>}/>*/}

                    {/*关于默认路由的配置：情况二*/}
                    <Route index element={<NavLink to={'cart'}/>}/>
                    <Route path={'cart'} element={<Cart/>}/>
                    <Route path={'collect'} element={<Collect/>}/>

                </Route>
                <Route path={'*'} element={<NotFound/>}/>
            </Routes>
        </div>
    );
}

export default App;